<template>
    <div>
        <!-- 密码重置 -->
        <cvue-dialog :dialogVisible="dialogVisible"
            :dialogLoading="dialogLoading"
            title="修改密码"
            dialogWidth="500px"
            @handleOpen="getDetail"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
            @handleClose="handleClose">
            <div class="dialog-body" slot="dialogBody">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-row :gutter="20">
                        <!-- <el-col :span="24">
                            <el-form-item label="输入旧密码" prop="oldPassword">
                                <el-input maxlength="16" v-model="ruleForm.oldPassword" type="password" placeholder="请输入旧密码" ></el-input>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="24">
                            <el-form-item label="输入密码" prop="password">
                                <el-input maxlength="16" v-model="ruleForm.password" type="password" placeholder="8-16位字符，包含字母大小写、数字、符号中的三种"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="确认密码" prop="checkPassword">
                                <el-input maxlength="16" v-model="ruleForm.checkPassword" type="password" placeholder="请再次输入密码"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import cvueTable from '@/components/cvue-table'
export default {
    name: 'indexPasswordReset',
    components: {
        cvueDialog,
        cvueTable
    },
    data () {
        var validateOldPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入旧密码'))
            } else {
                callback()
            }
        }
        var validatePass = (rule, value, callback) => {
            var length = value.length
            // 数字，大小写字母和英文符号，四选三
            var reg1 = /^[0-9a-zA-Z!@#\$%\^&*\(\)_\+\=\-\/\.,<>\?\[\]{};:"'\|`~]{8,16}$/
            var reg2 = /[0-9]{1}/
            var reg3 = /[a-z]{1}/
            var reg4 = /[A-Z]{1}/
            var reg5 = /[!@#\$%\^&*\(\)_\+\=\-\/\.,<>\?\[\]{};:"'\|`~]{1}/
            var count = 0
            console.log(value)
            if (reg2.test(value)) {
                count++
            }
            if (reg3.test(value)) {
                count++
            }
            if (reg4.test(value)) {
                count++
            }
            if (reg5.test(value)) {
                count++
            }
            if (value == '' || value == undefined) {
                callback(new Error('请输入密码'))
            } else if (!(reg1.test(value) && count >= 3) || length < 8 || length > 16) {
                callback(new Error('长度8-16位，需包含字母大小写、数字、符号中的三种'))
            } else {
                callback()
            }
        }
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value === undefined) {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            ruleForm: {
                oldPassword: '',
                password: '',
                checkPassword: ''
            },
            rules: {
                // oldPassword: [
                //     { required: true, validator: validateOldPass, trigger: 'blur' }
                // ],
                password: [
                    { required: true, validator: validatePass, trigger: 'blur' }
                ],
                checkPassword: [
                    { required: true, validator: validatePass2, trigger: 'blur' }
                ]
            },
            disabled: true,
            dialogLoading: false
        }
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    mounted () {
      // console.log(this.$parent)
    //   this.ruleForm.userName = this.$parent.userName
    },
    methods: {
        // 触发事件
        handleClose () {
            this.$refs['ruleForm'].clearValidate()
            this.$refs['ruleForm'].resetFields()
            this.$emit('handleClose')
        },
        closeDialog () {
            this.$refs['ruleForm'].clearValidate()
            this.$refs['ruleForm'].resetFields()
            this.$emit('closeDialog')
        },
        confirmDialog () {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    var params = {
                        password: this.ruleForm.password
                        // oldPassword: this.ruleForm.oldPassword
                    }
                    this.dialogLoading = true
                    this.$store.dispatch('user/EditPassword', params).then(res => {
                        // console.log(res)
                        if (res.code == 200) {
                            this.$message({
                                message: '修改成功,正在跳转首页',
                                duration: 2000,
                                type: 'success'
                            })
                            this.$emit('confirmDialog')
                        } else {
                            this.$message({
                                message: res.msg,
                                duration: 2000,
                                type: 'error'
                            })
                            this.dialogLoading = false
                        }
                    }).catch(err => {
                        console.log(err)
                        this.dialogLoading = false
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        // 初始化弹窗
        getDetail () {
            this.dialogLoading = false
            this.ruleForm = {
               oldPassword: '',
               password: '',
               checkPassword: ''
            }
        }
    }
}
</script>
<style scoped>
</style>
